<template>
    <uxt-page title="表单">
        <view class="padding flex justify-end align-center">
            <block v-if="box">
                圆角：
                <uxt-radio-group v-model="radius" size="sm" type="btn">
                    <uxt-radio label="无" value=""></uxt-radio>
                    <uxt-radio classes="margin-lr-sm" label="小圆角" value="radius"></uxt-radio>
                    <uxt-radio classes="margin-right-sm" label="大圆角" value="round"></uxt-radio>
                </uxt-radio-group>
            </block>
            盒模式：
            <uxt-switch v-model="box" round size="sm" @change="radius = ''"></uxt-switch>
        </view>
        <uxt-form @submit="submit">
            <uxt-bar
                title="单选框"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
            >
                <template slot="right">
                    <uxt-radio name="radio" v-model="form.radio" label="选项"></uxt-radio>
                </template>
            </uxt-bar>
            <uxt-bar
                title="单选框组"
                desc="项数多建议使用单选器"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
            >
                <template slot="right">
                    <uxt-radio-group name="gradios" v-model="form.gradios">
                        <uxt-radio
                            :checked="index === 0"
                            classes="margin-left-xs"
                            v-for="(i, index) in 3"
                            :key="index"
                            :label="`选项${index + 1}`"
                            :value="`${index + 1}`"
                        ></uxt-radio>
                    </uxt-radio-group>
                </template>
            </uxt-bar>
            <uxt-single-selector-bar
                title="单选器"
                name="singleSelector"
                v-model="form.singleSelector"
                :options="options"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
                clearable
            ></uxt-single-selector-bar>
            <uxt-bar
                title="复选框"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
            >
                <template slot="right">
                    <uxt-checkbox
                        name="checkbox"
                        v-model="form.checkbox"
                        label="选项"
                    ></uxt-checkbox>
                </template>
            </uxt-bar>
            <uxt-bar
                title="复选框组"
                desc="项数多建议使用多选器"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
            >
                <template slot="right">
                    <uxt-checkbox-group name="gcheckboxes" v-model="form.gcheckboxes">
                        <uxt-checkbox
                            classes="margin-left-xs"
                            v-for="(i, index) in 3"
                            :key="index"
                            :label="`选项${index + 1}`"
                            :value="`${index + 1}`"
                        ></uxt-checkbox>
                    </uxt-checkbox-group>
                </template>
            </uxt-bar>
            <uxt-multi-selector-bar
                title="多选器"
                name="multiSelector"
                v-model="form.multiSelector"
                :options="options"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
                clearable
            ></uxt-multi-selector-bar>
            <uxt-bar
                title="开关"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
            >
                <template slot="right">
                    <uxt-switch name="switch" v-model="form.switch" round></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-input-bar
                title="输入框"
                name="input"
                v-model="form.input"
                clearable
                :maxlength="10"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
            ></uxt-input-bar>
            <uxt-input-bar
                title="多行输入"
                name="textarea"
                type="textarea"
                v-model="form.textarea"
                clearable
                auto-height
                :maxlength="100"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
            ></uxt-input-bar>
            <uxt-color-selector-bar
                title="颜色选择器"
                name="colorSelector"
                light
                gradual
                clearable
                v-model="form.colorSelector"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
            ></uxt-color-selector-bar>
            <uxt-picker-bar
                title="滑选器"
                name="picker"
                :options="options"
                v-model="form.picker"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
            ></uxt-picker-bar>
            <uxt-picker-bar
                title="滑选器(多项)"
                name="picker2"
                :options="options2"
                v-model="form.picker2"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
            ></uxt-picker-bar>
            <uxt-picker-bar
                title="滑选器(联动)"
                name="picker3"
                :options="options3"
                v-model="form.picker3"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
            ></uxt-picker-bar>
            <uxt-time-picker-bar
                title="时间滑选器"
                name="timepicker"
                v-model="form.timepicker"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
            ></uxt-time-picker-bar>
            <uxt-date-picker-bar
                title="日期滑选器"
                name="datepicker"
                v-model="form.datepicker"
                :box="box"
                :round="radius === 'round'"
                :radius="radius === 'radius'"
            ></uxt-date-picker-bar>
            <uxt-button classes="margin" size="block" bg-color="blue" form-type="submit" radius>
                通过@submit获取表单数据
            </uxt-button>
            <uxt-button classes="margin" size="block" bg-color="green" @click="handleClick" radius>
                通过v-model获取表单数据
            </uxt-button>
            <uxt-button classes="margin" size="block" bg-color="red" form-type="reset" radius>
                重置
            </uxt-button>
        </uxt-form>
        <view class="padding" style="word-break: break-all;">{{ ret }}</view>
    </uxt-page>
</template>

<script>
import uxtBar from '@xtcoder/uxt/components/uxt-bar.vue'
import uxtForm from '@xtcoder/uxt/components/uxt-form.vue'
import uxtCheckbox from '@xtcoder/uxt/components/uxt-checkbox.vue'
import uxtCheckboxGroup from '@xtcoder/uxt/components/uxt-checkbox-group.vue'
import uxtMultiSelectorBar from '@xtcoder/uxt/components/uxt-multi-selector-bar.vue'
import uxtRadio from '@xtcoder/uxt/components/uxt-radio.vue'
import uxtRadioGroup from '@xtcoder/uxt/components/uxt-radio-group.vue'
import uxtSingleSelectorBar from '@xtcoder/uxt/components/uxt-single-selector-bar.vue'
import uxtSwitch from '@xtcoder/uxt/components/uxt-switch.vue'
import uxtInputBar from '@xtcoder/uxt/components/uxt-input-bar.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'
import uxtPickerBar from '@xtcoder/uxt/components/uxt-picker-bar.vue'
import uxtTimePickerBar from '@xtcoder/uxt/components/uxt-time-picker-bar.vue'
import uxtDatePickerBar from '@xtcoder/uxt/components/uxt-date-picker-bar.vue'
import uxtButton from '@xtcoder/uxt/components/uxt-button.vue'

export default {
    components: {
        uxtBar,
        uxtForm,
        uxtCheckbox,
        uxtCheckboxGroup,
        uxtMultiSelectorBar,
        uxtRadio,
        uxtRadioGroup,
        uxtSingleSelectorBar,
        uxtSwitch,
        uxtInputBar,
        uxtColorSelectorBar,
        uxtPickerBar,
        uxtTimePickerBar,
        uxtDatePickerBar,
        uxtButton
    },
    data() {
        return {
            box: false,
            radius: '',
            form: {
                radio: false,
                gradios: '2',
                singleSelector: -1,
                checkbox: false,
                gcheckboxes: ['2'],
                multiSelector: [],
                switch: false,
                input: '',
                textarea: '',
                colorSelector: '',
                picker: -1,
                picker2: [],
                picker3: [],
                timepicker: '',
                datepicker: ''
            },
            options: ['选项1', '选项2', '选项3', '选项4'],
            options2: [
                ['选项11', '选项12', '选项13', '选项14'],
                ['选项21', '选项22', '选项23', '选项24']
            ],
            options3: [
                ['广东省', '江西省'],
                [['广州市', '深圳市'], ['南昌市', '吉安市']],
                [
                    [['天河区', '番禹区'], ['福田区', '龙岗区']],
                    [['东湖区', '西湖区'], ['吉州区', '吉安县']]
                ]
            ],
            ret: ''
        }
    },
    methods: {
        submit(e) {
            this.ret = JSON.stringify(e)
            // this.ret += ',' + JSON.stringify(this.form)
        },
        handleClick() {
            this.ret = JSON.stringify(this.form)
        }
    }
}
</script>

<style lang="scss" scoped></style>
